<template>
  <div>
    <criteria-paged :model="model" v-ref:paged>
      <criteria partial='criteria' @condition-changed='search'>
        <div novalidate class="form-inline auto" partial>
          <div class="form-group">
            <!-- <label class="col-sm-12 control-label">选择年月：</label> -->
            <div class="col-sm-12">
              <datepicker placeholder="请选择年月"
                :value.sync="$parent.$parent.model.f_ym"
                :disabled-days-of-Week="[]"
                :format="'yyyy-MM'">
              </datepicker>
              <!-- <button class="btn btn-default" @click="search()">查询</button> -->

                   <button type="button" class="btn btn-success width-80" @click="search()">查询</button>

              <div class="form-group">
                部门:
                <chooser :userid.sync='$parent.$parent.loginer.id' resource-type="organization" :width='200' :select-data.sync='$parent.$parent.model.chosenOrg'></chooser>
              </div>
              {{$parent.$parent.model.chosenOrg.fullname}}
            </div>
            <!-- <div class="form-group">
              <v-select
                :value.sync="model.chosenOrg"
                v-model='model.chosenOrg'
                :options='$parent.chosenOrgType'
                placeholder='部门'
                condition="chosenOrg = '{}'"
                close-on-select>
              </v-select>
            </div> -->
          </div>
        </div>
      </criteria>
      <data-grid :model="model" partial='list' v-ref:grid>
        <template partial='head'>
          <tr>
            <th>手机使用者</th>
            <th>流量Mb</th>
          </tr>
        </template>
        <template partial='body'>
          <td v-on:click.stop.prevent='$parent.$parent.$parent.dailyTraffic(row)'>{{row.f_user_name}}&nbsp;&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-option-horizontal"></span></td>
          <td>{{row.f_traffic}}</td>
        </template>
      </data-grid>
    </criteria-paged>
  </div>
</template>

<script>
import { PagedList } from 'vue-client'
import * as Util from '../Util'
import AppData from '../../stores/AppData'
export default {
  title: '月流量统计',
  data () {
    let model = new PagedList('rs/rcq/月度流量统计', 20, {f_loggedOnUserId: 'this.f_loggedOnUserId', f_loggedOnOrgId: 'this.chosenOrg.id', f_ym: 'this.f_ym'})
    model.f_ym = Util.toStandardYearMonth()
    model.chosenOrg = {id: 0}
    return {
      model: model,
      loginer: Util.f
    }
  },
    // props: ['f'],
  methods: {
    dailyTraffic (row) {
      this.$goto('daily-traffic', {f_user_id: row.f_user_id, f_user_name: row.f_user_name, f_ym: this.model.f_ym}, 'self')
    }
  },
  ready () {
    this.model.f_loggedOnUserId = this.loginer.id
    this.model.chosenOrg.id = this.loginer.parent.id
    this.model.search()
  },
  computed: {
    chosenOrgType () {
      return [{label: '全部', value: ''}, ...AppData.getParam('部门')]
    }
  }
}
</script>
